<template>
  <van-search
      v-model="keyWord"
      shape="round"
      input-align="center"
      placeholder="找队伍"
      @search="onSearch"/>
  <team-list :team-list="teamList" :login-user-id="loginUserId" :loading="loading" @getTeamList="getTeamList" :is-mine="false"
             @handle-page-change="handlePageChange" :total="total" :page-size="pageSize"/>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios";
import {TeamType} from "../models/team";
import TeamList from "../components/TeamList.vue";

const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const loading = ref(false);
const teamList = ref<TeamType[]>([]);
const keyWord = ref('');
const getTeamList = async () => {
  const res = await myAxios.get('/user-manage/currentUser') as any;
  if (res) {
    loginUserId.value = res.data.id;
    const response = await myAxios.post('/team-manage/search', {
      keyWord: keyWord.value,
      pageNum: pageNum.value,
      pageSize: pageSize.value
    });
    loading.value = false;
    if (response.data) {
      teamList.value = response.data;
      total.value = response.total;
    }
  }
}
const onSearch = () => {
  pageNum.value = 1;
  getTeamList();
};
const loginUserId = ref(null);
onMounted(() => {
  keyWord.value = '';
  getTeamList();
});
const handlePageChange = (page: number) => {
  pageNum.value = page;
  getTeamList();
};

</script>
